﻿<!DOCTYPE html>
<html>
<head>
  <title>Приточка П2</title>
  <meta charset="utf-8">
  <script>
let index=0;
function onload(){
 var parentpopup = parent.document.getElementById("popup");
 parentpopup.style.height="400px";
 parentpopup.style.width="600px";
 document.getElementById("name").innerHTML=$TY_VentP2Name;
 showvalues();
}
function showvalues() {
  let ventel=document.getElementById("vnt1");
  let ventstel=document.getElementById("vtst");
  let el = document.getElementById("state");
  if($TY_ShakRS!=0){el.innerHTML="Отключен";
   el.style.backgroundColor="#808080";
   ventel.src = "images/ventoff.png";
  }
  else if($TY_VentP2On>0){el.innerHTML="Включен";
    el.style.backgroundColor="#00ff00";
    ventel.src = "images/venton.png";
    ventstel.innerHTML="Включен";
    ventstel.style.backgroundColor="#00ff00";
  }
  else {el.innerHTML="Выключен";
    el.style.backgroundColor="#ffffffff";
    ventel.src = "images/ventoff.png";
    ventstel.innerHTML="Выключен";
  }
  el = document.getElementById("htst");
  if($TY_VentP2HeaterOn!=0){
   el.style.backgroundColor="#00ff00";
   el.innerHTML="Вкл.";}
  else{
   el.style.backgroundColor="#ffffffff";
   el.innerHTML="Выкл.";
  }
   el = document.getElementById("mode");
   if($TY_VentP2Auto==0){el.innerHTML="Ручн";
   el.style.backgroundColor="#ffff00";}
   else {el.innerHTML="Авто";
    el.style.backgroundColor="#00ff00";}
   el = document.getElementById("alr");
   if($TY_VentP2Alarm==0){el.innerHTML="Ok";
   el.style.backgroundColor="#00ff00";}
   else {el.innerHTML="Отказ";
    el.style.backgroundColor="#ff0000";}
   document.getElementById("temp1").innerHTML=$TY_VentP2Tstreet+"&deg;C";
   document.getElementById("temp2").innerHTML=$TY_VentP2Tout+"&deg;C";
   if($TY_VentP2WrEn!=0){document.getElementById("load").style.width = "100%";} else {document.getElementById("load").style.width = "0%";}
}
function getvalues() {
fetch("TY_VentP2On-TY_VentP2Auto-TY_VentP2Alarm-TY_ShakRS-TY_VentP2Tout-TY_VentP2Tstreet-TY_VentP2HeaterOn.json").then(function(response) {
response.text().then(function(text) {
const jsonobj=JSON.parse(text);
TY_VentP2On=jsonobj.TY_VentP2On;
TY_VentP2Auto=jsonobj.TY_VentP2Auto;
TY_VentP2Alarm=jsonobj.TY_VentP2Alarm;
TY_ShakRS=jsonobj.TY_ShakRS;
TY_VentP2Tout=jsonobj.TY_VentP2Tout;
TY_VentP2Tstreet=jsonobj.TY_VentP2Tstreet;
TY_VentP2HeaterOn=jsonobj.TY_VentP2HeaterOn;
  showvalues();
  });
});
}
let menuvisible=0;
function showmenu(){
 if(menuvisible==0){
  document.getElementById("menu").style.display = "block";
  menuvisible=1;
 } else{
  document.getElementById("menu").style.display = "none";
  menuvisible=0;
 }
}
</script>
  <style>
  h1{font-size: 20px;}
  h2{font-size: 18px;}
body {
  background-image: url("images/ventp2.png");
  background-repeat: no-repeat;
   font-family:arial;
}
.vnt {position: absolute; top: 111px; left: 363px;}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

table {width: 100%;
   border-collapse: collapse;}

.showimg {position: absolute;
 top: 50%;
 right:50%;
 bottom: 0;
 width = "0px";
 background: url(images/loading.png) 100% 0 no-repeat;
 z-index: 1;}
.menu {
 position: absolute;
 display: none;
 left: 1px;
 top: 50px;
 width: 250px;
 height: 120px;
 background-color: white;
 border:1px solid black;
 z-index: 100;
}
  </style>
</head>
<body onload="onload()">
<img src="images/ventoff.png" class="vnt" id="vnt1">
<div id="load" class="showimg"></div>
<table >
<tr bgcolor="00C1FF"><td><img src="images/menu36.png" onclick="showmenu()"></td> <td align="center"><label id="name" style="font-size:30px"> .. </label></td></tr>
</table>
<div class="menu" id="menu">
 <br>
 <a href="tyventtrend.htm">Тренд параметров >>></a><br><br>
 <a href="tyventtable.htm">Таблица параметров >>></a><br><br>
 <a style="font-weight:bold" href="tyventcontrol.html">Управление >>></a><br>
</div>
<table>
<tr><td> Состояние<label id="state" style="font-size:24px"> ... </label> </td> <td><label id="alr" style="font-size:24px"> ....... </label> </td> <td> Режим <label id="mode" style="font-size:24px"> .. </label> </td> </tr>
</table>
<br>
<br>
<br>
<br>
<table><tr style="font-size:24px">
<td><label id="temp1">..</label></td>
<td align="right"><label id="temp2">..</label></td>
</tr></table>
<br><br><br><br>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;
<label style="font-size:20px" id="htst">???</label>&emsp;&emsp;&emsp;&emsp;
<label style="font-size:20px" id="vtst">???</label>

</body>
<script type="text/javascript">
var myint = setInterval("getvalues()",1000);
</script>
</html>
